<template>
	<view class="detail-page" :style="isGif==1?'background:none;':''">
		<detail-head url="../mine/mine" type="none"></detail-head>
		<view class="detail-img">
			<image class="prod-img" :src="detail.pictureUrl" mode="widthFix" v-if="isGif==1"></image>
			<Card :src="detail.pictureUrl" v-if="isGif==-1"></Card>
			<image class="prod-img" src="../../static/img/detail-add.jpg" mode="widthFix" v-if="isGif==1"></image>
		</view>
		<view class="detail-title" v-if="isGif!=1">
			<!-- 		<view class="title"><text>" </text> {{detail.worksName}}<text> "</text></view>
			<view class="auth">{{detail.attest}}</view> -->
		</view>
		<view class="goods-detail">
			<view class="title">
				<view class="left-icon">
					<image src="../../static/img/detail_ms_left.png" mode=""></image>
				</view>
				<view class="is-name">
					<view class="name">
						〝&nbsp;{{detail.worksName}}&nbsp;〞
					</view>
					<view class="tip">
						<view class="sm-name">
							{{detail.worksName}}
						</view>
						<view class="num">
							限量{{detail.total}}份
						</view>
					</view>
				</view>
				<view class="right-icon">
					<image src="../../static/img/detail_ms_right.png" mode=""></image>
				</view>
			</view>

			<!-- 价格编号 -->
			<view class="prise">
				<view class="left">
					<view class="font">
						价格
					</view>
					<view class="num">
						￥{{detail.price}}
					</view>
				</view>
				<view class="right">
					<view class="font">
						编号
					</view>
					<view class="num">
						#{{ detail.worksNum }}
					</view>
				</view>
			</view>
			<view class="address">
				<view class="hy">
					<text>合约地址</text>
					<image class="contract" src="../../static/img/heyue.png" mode="aspectFit"></image>
				</view>
				<view class="num">
					{{ setStringStyle(detail.contractAddress) }}
				</view>
			</view>
			<view class="lian">
				<view class="left">
					链上标识
				</view>
				<view class="right">
					{{detail.contractCode}}
				</view>
			</view>
		</view>
		<!--藏品描述  -->
		<view class="detail-desc">
			<view class="title">
				〝 &nbsp;藏品描述&nbsp; 〞
			</view>
			<view class="inner">
				{{ detail.describe }}
			</view>
		</view>
		<!-- 购买须知 -->
		<view class="notice">
			<view class="title">
				购买须知
			</view>
			<view class="inner">
				数字藏品为虚拟数字商品，而非实物，仅限实名认证为年满18周岁的中国大陆用户购买。数字藏品的版权由发行方和原创者所有，除另行获得版权拥有者书面同意外，用户不得将数字藏品用于任何商业用途。本商品一经售出，不支持退换。本商品源文件不支持本地下载。请勿对数字藏品进行炒卖、场外交易或以任何其他非法方式进行使用。
			</view>
		</view>
		<!-- fixed_box -->
		<view class="fixed-box" style="height: 150rpx;">

		</view>
		<view class="detail-bay" v-show="!!detail.id">
			<button type="default" @click="onCancelClick">取消挂售</button>
		</view>
	</view>

</template>

<script>
	import Card from '@/component/detail-card/index.vue'
	import {
		setStringStyle
	} from '../../utils/utils.js'
	import {
		getWorksDetails
	} from '../../request/prod-api.js'
	import {
		cancelSale
	} from '../../request/sale-api.js'
	export default {
		components: {
			Card
		},
		data() {
			return {
				isGif: 0,
				detail: {},
				setStringStyle,
			}
		},
		onLoad(option) {
			this.onloadDetail(option.id)
		},
		methods: {
			// 加载产品详情
			async onloadDetail(id) {
				try {
					let {
						code,
						message,
						data
					} = await getWorksDetails(id)
					if (code === 200) {
						this.detail = data
						if (this.detail.pictureUrl.search('.gif') != -1) {
							this.isGif = 1
						} else {
							this.isGif = -1
						}
					} else {
						uni.showToast({
							title: message,
							icon: 'error'
						})
					}
				} catch (err) {
					console.log(err)
					uni.showToast({
						title: '服务繁忙',
						icon: 'error'
					})
				}
			},

			// 取消挂售
			async onCancelClick() {
				console.log(this.detail)
				try {
					let {
						code,
						message
					} = await cancelSale(this.detail.id)
					if (code === 200) {
						uni.showToast({
							title: '挂售取消成功',
							icon: 'success'
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '../mine/mine',
								animationType: 'pop-in',
								animationDuration: 200
							})
						}, 1000)
					} else {
						uni.showToast({
							title: message,
							icon: 'none'
						})
					}
				} catch {
					uni.showToast({
						title: '服务繁忙',
						icon: 'error'
					})
				}
			},
			// 返回
			goback() {
				uni.navigateTo({
					url: '../mine/mine',
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import '../../static/css/detail2.scss';
</style>
